import { handleAction } from ".";
import { userStateMap } from "./dict";
import styles from "./index.module.less";
import { tableActiveKey, columns } from "./store";
export const tableData = ref([]);
export const tableLoading = ref(false);

const renderBasicImage = (data) => (
  <div>
    <a-image src={data.url} width="50px" />
  </div>
);
const defineBodyCellMap = (number, { value, text, index, column, record }) => {
  const renderIndex = () => (
    <div>
      <i>{index + 1}</i>
    </div>
  );
  const renderSrc = () => renderBasicImage({ url: record.src });
  const renderUrl = () => renderBasicImage(record);
  const renderIcon = () => renderBasicImage({ url: record.icon });
  const renderStatus = () => (
    <div>
      <i class={record.status === 0 ? "s-52c41a" : "s-c1c1c1"}>
        {selectDictLabel(userStateMap, record.status == 0 ? 0 : 1)}
      </i>
    </div>
  );

  const renderLevel = () => (
    <div>
      <i>{"LV" + record.level}</i>
    </div>
  );
  const renderAccessData = () => (
    <div>
      {record?.accessData?.length ? (
        <div class={[styles.Flex]}>
          {record?.accessData.map((item: any, index: any) => (
            <i>
              {index + 1}: {item.title}
            </i>
          ))}
        </div>
      ) : null}
    </div>
  );
  const renderRule = () => {
    if (number === 1)
      return (
        <div>
          <i>{$t("placeholder103") + record.rule + $t("base.percentage")}</i>
        </div>
      );

    if (number === 2)
      return (
        <div>
          <i>
            {$t("base.spend") +
              "USDT" +
              $t("base.reach") +
              record.rule +
              $t("base.unit")}
          </i>
        </div>
      );
  };
  const renderAction = () => {
    const updateGrade = {
      0: "gradeApi.updateVip",
      1: "gradeApi.updatePopular",
      2: "gradeApi.updateScore",
    };
    const statusGrade = {
      0: "gradeApi.updateVipStatus",
      1: "gradeApi.updatePopularStatus",
      2: "gradeApi.updateScoreStatus",
    };
    const basicActionNode = (
      <>
        {withDirectivePower({
          vNode: (
            <div class="s-table-body_cell">
              {renderUpdate.call({
                record,
                handleAction,
                identify: updateGrade[number],
              })}
              <a-divider type="vertical" />
            </div>
          ),
          bindingValue: updateGrade[number],
        })}

        {withDirectivePower({
          vNode: renderDisable.call({
            record,
            handleAction,
            identify: statusGrade[number],
          }),
          bindingValue: statusGrade[number],
        })}
      </>
    );
    if (number === 0 || number === 1) return <div>{basicActionNode}</div>;
    return (
      <div>
        {withDirectivePower({
          vNode: (
            <div class="s-table-body_cell">
              {renderDetail.call({
                record,
                handleAction,
                identify: "gradeApi.queryScoreById",
              })}
              <a-divider type="vertical" />
            </div>
          ),
          bindingValue: "gradeApi.queryScoreById",
        })}
        {basicActionNode}
      </div>
    );
  };
  return new Map([
    [{ key: "index", state: /[012]/ }, renderIndex],
    [{ key: "src", state: /[0]/ }, renderSrc],
    [{ key: "url", state: /[01]/ }, renderUrl],
    [{ key: "icon", state: /[012]/ }, renderIcon],
    [{ key: "status", state: /[012]/ }, renderStatus],
    [{ key: "level", state: /[012]/ }, renderLevel],
    [{ key: "accessData", state: /[012]/ }, renderAccessData],
    [{ key: "rule", state: /[12]/ }, renderRule],
    [{ key: "action", state: /[012]/ }, renderAction],
  ]);
};
const handleRenderBodyCellTask = (number, props) => {
  const array = [...defineBodyCellMap(number, props)].filter(
    ([object]) => object.key === props.column.key && object.state.test(number)
  );
  return array.map(([, value]) => value.call(this));
};
export const tableConfig = () => {
  const defineTable = {
    pagination: false,
    loading: tableLoading,
    columns: columns,
    dataSource: tableData,
    tableSlot: {
      bodyCell: (props) =>
        handleRenderBodyCellTask(tableActiveKey.value, props),
    },
  };

  return defineTable;
};
